import React, { Component } from 'react'
import './App.css'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      user: {
        firstName: 'JS',
        lastName: 'developer'
      }
    }
  }

  formatName(user) {
    return user.firstName + ' ' + user.lastName
  }

  getGreeting(user) {
    if (user) {
      return <h1>Hello, {this.formatName(this.state.user)}.</h1>
    }
    return <h1>Hello, Stranger.</h1>
  }

  render() {
    const element1 = this.getGreeting(this.state.user)
    const element2 = this.getGreeting()
    return (
      <div className="App">
        <header className="App-header">
          {element1}
          {element2}
        </header>
      </div>
    )
  }
}

export default App
